import React from "react";
import { Route, Routes, Link } from "react-router-dom";
import PrivateRoute from "./components/PrivateRoute";
import Login from "./views/Login";
import MyLayout from "./views/MyLayout";
// import Home from "./views/Home";
// import Me from "./views/Me";
// import ActivityList from "./views/ActivityList";
// import ActivityType from "./views/ActivityType";
// import Employee from "./views/Employee";
// import Role from "./views/Role";
// import About from "./views/About";
// import Setting from "./views/Setting";

function App() {
  return (
    <div className="App">
      <div className="app-header">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/setting">Setting</Link>
        <Link to="/activity/type">ActivityType</Link>
        <Link to="/authority/employee">Employee</Link>
        <Link to="/authority/role">Role</Link>
        <Link to="/activity/list">ActivityList</Link>
        <Link to="/login">Login</Link>
      </div>
      <Routes>
        {/* 嵌套子路由是放在 Mylayout 组件中，所以父组件的路径后需要跟上 * 否则无法渲染子组件 */}
        <Route
          path="/*"
          element={<PrivateRoute component={MyLayout} msg="ji"></PrivateRoute>}
        >
          {/* <Route index element={<Home />} />
          <Route path="me" element={<Me />} />
          <Route path="authority/employee" element={<Employee />} />
          <Route path="authority/role" element={<Role />} />
          <Route path="activity/list" element={<ActivityList />} />
          <Route path="activity/type" element={<ActivityType />} />
          <Route path="setting" element={<Setting />} />
          <Route path="about" element={<PrivateRoute component={About} msg="ji"></PrivateRoute>} /> */}
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
      {/* <AsyncRouter />/ */}
    </div>
  );
}

export default App;
